<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Contained ePub Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link rel="stylesheet" href="basic.css">

        <!-- EPUBJS Renderer -->
           <script src="../../build/epub.js"></script>

        <!-- Zip JS -->
        <script src="../../build/libs/zip.min.js"></script>

        <script>

            // EPUBJS.filePath = "../build/libs/zip/";
            EPUBJS.cssPath = "../reader/css/";

        </script>

        <script>
            "use strict";
                  function Tran(text)
        {
            var str = text.replace(/<[^>]+>/g,"");
            var url = 'http://www.neat-reader.cn/api/translate?text=' + encodeURI(str);
            var xmlHttp = new window.XMLHttpRequest();
            xmlHttp.open("GET", url, false);
            xmlHttp.send(null);
            try
            {
                var result = JSON.parse(JSON.parse(xmlHttp.response).data).trans_result[0].dst;
                return result;
            }
            catch(e){}

        }

        function insertAfter(newNode, referenceNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }
         EPUBJS.Hooks.register("beforeChapterDisplay").translate = function(callback, renderer){
                    var elements = renderer.doc.querySelectorAll('p');
                    var news = [];
                    elements.forEach(function(ele) {
                        var dst = Tran(ele.innerHTML);
                        if (dst) {
                            var newnode = ele.cloneNode(true);
                            newnode.innerHTML = dst;
                            news.push(newnode);
                            news.push(ele);

                        }
                      console.log(ele.innerHTML);

                    });
                    for(var i =0;i < news.length -1;i=i+2)
                    {
                        insertAfter(news[i],news[i+1]);
                    }


                    if(callback) callback();



                }

            var Book = ePub("../mybook/");
            Book.on('renderer:locationChanged', function(locationCfi){
                localStorage["cfi"] =locationCfi ;
            });
        </script>
    </head>
    <body>
        <div id="main">
          <div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
          <div id="area"></div>
          <div id="next" onclick="Book.nextPage();" class="arrow">›</div>
        </div>

        <script>

            Book.renderTo("area");
            Book.gotoCfi(localStorage["cfi"]);

        </script>
    </body>
</html>
